<template>
  <view class="wapx">
     <view class="bg">
     	<view class="fanhui">
     			<image src="../../../../static/teacherimg/fan.png" mode="" class="hui"></image>
     			<text class="myxueyuanzi">我的学员</text>
     	</view>
     </view>
    <view class="searchk">
      <view class="searchtu">
        <image src="../../../../static/teacherimg/search.png" class="serachimg" alt="" />
      </view>
      <input type="text" name="sousuo" id="search" placeholder="搜索学员姓名" />
    </view>

    <view
      class="class-banji"
      v-for="(item, index) in xueshengList"
      :key="index"
      @click="keshixiangqing(item)"
    >
      <view class="class-touxiang">
        <image :src="item.image" alt="" />
      </view> 
      <view class="class-name">{{ item.name }}</view>
      <image src="../../../../static/teacherimg/jinru.png" class="zhao" alt=""/>
    </view>
  </view>
</template>

<script>

export default {
  data() {
    return {
      // 学生列表
      xueshengList: [
		  {
		    name: "原大帅",
		    image:require("../../../../static/teacherimg/headimg.png"),
		    
		  },
		  {
		    name: "九米阳光",
		    image: require("../../../../static/teacherimg/headimg.png"),
		  },
	    ],
      checked: true,
      
	  
    };
  },
  methods: {
    keshixiangqing(){
		
	},
    },
 
  created() {
    
  },
  components: {
  
  },
};
</script>

<style>
.wapx{
  background:none;
}
.bg{
	width: 100%;
	height: 116rpx;
	position: relative;
	background: url(../../../../static/teacherimg/tabbar.png) no-repeat;
	background-size: cover;
}
.fanhui{
	width: 690rpx;
	height: 35rpx;
	position: absolute;
	display: flex;
	bottom: 0rpx;
	left: 30rpx;
}

.myxueyuanzi{
	width:auto;
	height: 100%;
	font-size:32rpx;
	color: #333333;
	font-weight: bold;
	margin: auto;
}
.hui{
	width: 18rpx;
	height: 32rpx;
}
.searchk {
  width: 83.6vw;
  height: 8vw;
  margin: auto;
  margin-top:60rpx;
  background: #f5f5f5;
  border-radius: 3.4667vw;
  display: table;
  margin-bottom: 9vw;
}
.serachimg{
	top: -10rpx;
}

.searchtu {
  width: 4vw;
  height: 4vw;
  float: left;
  margin-top: 2vw;
  margin-left: 27.8667vw;
}
.searchtu image {
  width: 4vw;
  height: 4vw;
}

#search {
  width: 20vw;
  height: 3.2vw;
  float: left;
  margin-left: 1.6vw;
  margin-top: 2.4vw;
  color: #a9a9a9;
  font-size: 3.2vw;
  font-family: PingFang SC;
  font-weight: 500;
  border: none;
  outline: none;
  background: #f5f5f5;
}

.class-banji {
  width: 83.6vw;
  height: 14.6667vw;
  margin: auto;
  margin-top: 4.1333vw;
  background: #ffffff;
  box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.16);
  border-radius: 2.6667vw;
  display: table;
  margin-bottom: 5.3333vw;
}
.class-touxiang {
  width: 10.6667vw;
  height: 10.6667vw;
  float: left;
  margin: 2vw 3.6vw 0vw 4vw;
  border-radius: 50%;
  overflow: hidden;
}
.class-touxiang image {
  width: 10.6667vw;
  height: 10.6667vw;
}
.class-name {
  width: auto;
  height: 4vw;
  float: left;
  color: #333333;
  font-size: 3.7333vw;
  line-height: 4vw;
  font-weight: 500;
  margin-top: 5.3333vw;
  font-family: PingFang SC;
}

.zhao {
  width: 1.4667vw;
  height: 2.6667vw;
  float: right;
  margin-top: 6vw;
  margin-right: 5.3333vw;
}
</style>